<template>
  <div class="leave-type-box">
    <span>*</span>
    <span>请假类型</span>
    <span>
       <van-field
        readonly
        clickable
        placeholder="请选择 （点击出发弹窗）"
        :value="value"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" round position="bottom">
        <van-picker
          show-toolbar
          default-index = '0'
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
        />
      </van-popup>
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: '',
      showPicker: false,
      columns: ['病假', '事假'],
    }
  },
  methods: {
    onConfirm(value) {
      this.value = value
      this.showPicker = false
      this.$emit('saveValue', value)
    },
  },
}
</script>
<style lang="scss" scoped>
.leave-type-box {
  position: relative;
  height: 70px;
  margin-bottom: 5px;
  background: #FFFFFF;
  span {
    position: absolute;
    &:first-child {
      top: 10px;
      left: 20px;
      color: red;
      font-size: 13px;
    }
    &:nth-child(2) {
      top: 10px;
      left: 36px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8c97b2;
    }
     &:nth-child(3) {
      left: 20px;
      bottom: 0px;
      ::v-deep .van-cell {
        background-color: transparent;
      }
      ::v-deep .van-field__control {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #002170;
      }
      ::v-deep .van-ellipsis {
        color: #2A529F;
      }
    }
  }

}
</style>